import React from 'react';
import {
  Form,
  Modal,
  Card,
  DatePicker,
  Radio,
  Input,
  Row,
  Col,
  Checkbox,
  Button
} from 'antd';
import { LwjArea }  from 'components';
import { validateMobile,validatorCharacters } from 'utils/utils';
import { LwjUpload } from 'components';
import moment from 'moment';

const FormItem = Form.Item
const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14,
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 8,
      offset: 2,
    },
    sm: {
      span: 8,
      offset: 2,
    },
  },
}
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button

const addEndContractForm = ({
  dispatch,
  onOk,
  isUpdate,
  currentContractDetail,
  currentOrderDetail,
  currentSystemProperty,
  user,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll
  },
  ...updateModalProps
}) => {

  const handleSubmit = () => {
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.info("UI层提交按钮单击")
        // 处理日期数据
        let _orderContractAt = values.orderContractAt.valueOf();
        let _installContractAt = values.installContractAt.valueOf();
        values.orderContractAt = values.orderContractAt.format('YYYY-MM-DD');
        values.installContractAt = values.installContractAt.format('YYYY-MM-DD');
        if (_orderContractAt > _installContractAt) {
          Modal.info({ title: '合同签订时间不能大于合同到货时间' });
          return;
        }
        // 组装收货人地址数据
        values.consigneeProvince = values.consigneeRegion[0];
        values.consigneeCity = values.consigneeRegion[1];
        values.consigneeDistrict = values.consigneeRegion[2];
        //意向单信息
        values.id = currentOrderDetail.id;
        values.consigneeRegionName = currentContractDetail.consigneeRegionName;
        //todo 租户配置之是否自采

        console.info("UI层数据拼装完成")
        onOk(values);
        console.info("UI层数据添加完成")
      }
    });
  };
  const xlsProps = {
    target: '/services/upload/order',
    accept: 'image/*,.pdf,.dwg,.dwf,.zip,.rar,.xlsx,.xls',
    uploadIcon: 'upload',
    fileType: '',
    onChange(value) {
    },
    showUploadList: true
  }

  const modalOpts = {
    ...updateModalProps
  }

  const onChangeArea = (value,arr) => {
    currentContractDetail.consigneeRegionName = arr.map((val) => val.label).join("")
  }

  /** @namespace currentContractDetail.sample */
  /** @namespace currentContractDetail.supplement */
  return (
    <Modal {...modalOpts} 
      footer={[
        <Button key="submit" type="primary" onClick={handleSubmit}>
          选购商品
        </Button>
      ]}>
      <Card bordered={false}>
        <Form onSubmit={handleSubmit} hideRequiredMark>
          <Row>
            <Col span={12}>
              <FormItem {...formItemLayout} label="合同签订时间">
                {getFieldDecorator('orderContractAt', {
                  rules: [
                    {
                      required: true,
                      message: '请选择合同下单时间',
                      type: 'object',
                    },
                  ],
                  initialValue: currentContractDetail.orderContractAt
                })(
                  <DatePicker style={{ width: '100%' }} />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="合同到货时间">
                {getFieldDecorator('installContractAt', {
                  rules: [
                    {
                      required: true,
                      message: '请选择合同到货时间',
                      type: 'object',
                    },
                  ],
                  initialValue: currentContractDetail.installContractAt
                })(
                  <DatePicker style={{ width: '100%' }} />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="商家设计师姓名">
                {getFieldDecorator('contactName', {
                  rules: [
                    {
                      required: true,
                      message: '请输入商家设计师姓名',
                      whitespace: true
                    }
                  ],
                  initialValue: currentContractDetail.contactName
                })(<Input placeholder="请输入商家设计师姓名" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="商家设计师电话">
                {getFieldDecorator('contactPhone', {
                  rules: [
                    {
                      required: true,
                      message: '请输入正确的商家设计师电话',
                      whitespace: true
                    }, {
                      validator: validateMobile
                    }
                  ],
                  initialValue: currentContractDetail.contactPhone
                })(<Input placeholder="请输入商家设计师电话" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="客户姓名">
                {getFieldDecorator('customerName', {
                  rules: [
                    {
                      required: true,
                      message: '客户姓名不能为空',
                      whitespace: true
                    },
                    {
                      max:5,
                      message: '客户姓名长度不能大于5',
                      whitespace: true
                    }
                    ,{
                      validator:validatorCharacters
                    }
                  ],
                  initialValue: currentOrderDetail.customerName
                })(<Input disabled placeholder="请输入客户姓名" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="客户手机号">
                {getFieldDecorator('customerPhoneNum', {
                  rules: [
                    {
                      required: true,
                      message: '请输入客户手机号',
                      whitespace: true
                    }, {
                      validator: validateMobile
                    }
                  ],
                  initialValue: currentOrderDetail.customerPhoneNum
                })(<Input disabled placeholder="请输入客户手机号" />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout} label="合同类型">
                {getFieldDecorator('contractType', {
                  rules: [
                    {
                      required: true,
                      message: '请选择合同单类型'
                    }
                  ],
                  initialValue: currentContractDetail.contractType
                })(
                  <Radio.Group disabled={!_.isEmpty(currentContractDetail.contractType)} >
                    <RadioButton value="NORMAL">正常合同</RadioButton>
                    <RadioButton value="SAMPLE">样品合同</RadioButton>
                    <RadioButton value="SUPPLEMENT">增补合同</RadioButton>
                  </Radio.Group>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="收货人姓名">
                {getFieldDecorator('consigneeName', {
                  rules: [
                    {
                      required: true,
                      message: '收货人姓名不能为空',
                      whitespace: true
                    },
                    {
                      max:5,
                      message: '收货人姓名长度不能大于5',
                      whitespace: true
                    }
                    ,{
                      validator:validatorCharacters
                    }
                  ],
                  initialValue: currentContractDetail.consigneeName
                })(<Input placeholder="请输入收货人姓名" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="收货人手机号">
                {getFieldDecorator('consigneePhoneNum', {
                  rules: [
                    {
                      required: true,
                      message: '请输入正确的收货人手机号',
                      whitespace: true
                    }, {
                      validator: validateMobile
                    }
                  ],
                  initialValue: currentContractDetail.consigneePhoneNum
                })(<Input placeholder="请输入收货人手机号" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="收货人地址">
                {getFieldDecorator('consigneeRegion', {
                  rules: [
                    {
                      required: true,
                      message: '请选择收货人地址',
                      type: 'array'
                    }
                  ],
                  initialValue: currentContractDetail.consigneeRegion
                })(

                  < LwjArea width={'100%'}  onChange={onChangeArea} />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="收货人详细地址">
                {getFieldDecorator('consigneeAddress', {
                  rules: [
                    {
                      required: true,
                      message: '请输入收货人详细地址',
                      whitespace: true
                    }
                  ],
                  initialValue: currentContractDetail.consigneeAddress
                })(<Input placeholder="请输入收货人详细地址" />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
    </Modal>
  )
}

export default Form.create()(addEndContractForm);
